<template>
  <span class="text-jump">
    <span v-for="(char, index) in text.split('')" :key="index" :style="{ '--delay': `${index * 150}ms`, '--duration': `${duration}ms` }">{{ char }}</span>
  </span>
</template>

<script setup>

const props = defineProps({
  text: {
    type: String,
    default: 'LOADING'
  },
  duration: {
    type: Number,
    default: 1200 // 默认跳动速度为 800ms
  }
});
</script>

<style scoped>
.text-jump span {
  display: inline-block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  letter-spacing: 1px;
  animation: jump var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes jump {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
</style>    